<script setup>
//import {excelApi} from "../../../api/axios";
//import {MINIO_HOST} from "../../../const";
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {dateFormat, myRemove, myPage, myRemoveBatch, getResponseData} from "../../../util";
import {pageApi, removeApi, removeBatchApi} from "../../../api/attendance.js";
import {listApi as listStudentApi} from "../../../api/student.js";
import {listApi as listClazzApi} from "../../../api/clazz.js";
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import MyPager from "../../../components/MyPager.vue";
import MyList from "../../../components/MyList.vue";

/* ==================== 分页查询 ==================== */
// 表格数据 + 分页数据
let records = ref();
let pageInfo = shallowReactive({'pageNum': 1, 'pageSize': 5, 'fn': page});
// 分页查询条件字段：学生ID，班级ID，课程ID
let studentName = shallowRef();
let clazzId = shallowRef();
let teachingScheduleId = shallowRef();

// 分页函数
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {

  // 分页基础配置
  let config = {
    'api': pageApi,
    'params': {pageNum, pageSize},
    'records': records,
    'pageInfo': pageInfo
  }

  // 附加为分页条件
  if (studentName.value) config['params']['studentName'] = studentName.value;
  if (clazzId.value) config['params']['clazzId'] = clazzId.value;
  if (teachingScheduleId.value) config['params']['teachingScheduleId'] = teachingScheduleId.value;

  // 发送分页请求
  await myPage(config);

  for (let i in records.value) {
    records.value[i].statusTag = 'success'
  }

}

/* ==================== 查看详情 ==================== */
// 考勤详情抽屉 + 考勤详情列表数据
let detailDrawer = shallowRef();
let detailItems = ref();

function detail(row) {
  detailItems.value = [
    {'label': '授课开始时间', 'value': row['teachingSchedules']['startTime']},
    {'label': '授课结束时间', 'value': row['teachingSchedules']['endTime']},
    {'label': '学生姓名', 'value': row['student']['name']},
    {'label': '出勤状态', 'value': row['status'], 'format': attendanceStatusFormat},
    {'label': '所在班级', 'value': row['clazz']['name']},
    {'label': '创建时间', 'value': row['created'], 'format': dateFormat},
    {'label': '修改时间', 'value': row['updated'], 'format': dateFormat},
    {'label': '考勤备注', 'value': row['note'], 'type': 'card'},
    {'label': '考勤描述', 'value': row['info'], 'type': 'card'},
  ];
  detailDrawer.value = true;
}

function attendanceStatusFormat(status) {
  if (status === 0 || status === '0') return '缺勤';
  if (status === 1 || status === '1') return '出勤';
  if (status === 2 || status === '2') return '请假';
  return '其他';
}

function attendanceStatusTagFormat(status) {
  if (status === 0 || status === '0') return 'danger';
  if (status === 1 || status === '1') return 'success';
  if (status === 2 || status === '2') return 'warning';
  return 'default';
}

/* ==================== 查询全部的班级记录 ==================== */
let clazzItems = [];

async function listClazz() {
  let res = await listClazzApi();
  Object.values(getResponseData(res)).forEach(clazz => {
    clazzItems.push({'label': clazz['name'], 'value': clazz['id']});
  });
}

/* ==================== 按学生精准查询 ==================== */
function pageByStudentName(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || studentName.value) {
    studentName.value = val;
    page();
  }
}

/* ==================== 按班级精准查询 ==================== */
function pageByClazzId(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || clazzId.value) {
    clazzId.value = val;
    page();
  }
}

/* ==================== 打印报表 ==================== */
function excel() {
  // excelApi('/attendance/excel', '考勤统计表');
}

/* ==================== 加载函数 ==================== */
onMounted(() => {
  page();
  listClazz();
});

</script>

<template>

  <my-nav :items="[
    {'icon': 'Avatar', 'label': '课程管理'},
    {'icon': 'User', 'label': '考勤列表'},
  ]"/>

  <my-head :items="[
    {'type': 'ipt', 'span': 5, 'placeholder': '按学生精准搜索', 'fn': pageByStudentName},
    {'type': 'opt', 'span': 5, 'placeholder': '按班级精准搜索', 'fn': pageByClazzId, 'optItems': clazzItems},
    {'type': 'excelBtn', 'offset': 13, 'fn': excel},
  ]"/>

  <my-table v-if="records" :records="records" :columns="[
    {'column': ['考勤信息', '开始时间'], 'property': 'teachingSchedules.startTime', format: dateFormat},
    {'column': ['考勤信息', '结束时间'], 'property': 'teachingSchedules.endTime', format: dateFormat},
    {'column': ['考勤信息', '学生姓名'], 'property': 'student.name'},
    {'column': ['考勤信息', '出勤状态'], 'property': 'status', 'tagTypeFn': attendanceStatusTagFormat, 'type': 'tag',  'width': '90', 'format': attendanceStatusFormat},
    {'column': ['考勤信息', '所在班级'], 'property': 'clazz.name'},
    {'column': ['考勤信息', '考勤备注'], 'property': 'note', 'type': 'card', 'tooltip': false},
    {'column': ['考勤信息', '考勤描述'], 'property': 'info', 'type': 'card', 'tooltip': false},
  ]" :buttons="[{'type': 'info', 'fn': detail}]"/>

  <my-pager v-if="records" :page-info="pageInfo"/>

  <el-drawer v-model="detailDrawer" size="30%">
    <my-list title="记录详情" :items="detailItems"/>
  </el-drawer>

</template>

<style scoped lang="scss">

</style>